<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nginx连接情况</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=1.0, user-scalable=yes, user-scalable=0, minimal-ui">
    <link rel="stylesheet" type="text/css" href="../../js/layer/css/layui.css">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="refresh" content="300">
    <script type="text/javascript" src="../../js/echarts.js"></script>
    <script type="text/javascript" src="../../js/layer/layui.js"></script>
    <script>
        window.MAIN_DATE = "";
    </script>
</head>
<body style="padding-left: 20px; padding-right: 20px;">

<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
        <li class="layui-this">实时连接情况</li>
    </ul>
</div>
<div id="realtime_connections" style="width: 100%;height:450px;"></div>


<div id="view">

    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">
                <select autocomplete="off" id="dates" onchange="onchangedate(this)" class="layui-input" style="width: 155px; border-style:none!important;">
                    {{#  arr_foreach(d.dates, function(index, item){ }}
                    {{#  if(item == MAIN_DATE){ }}
                    <option value="{{item}}" selected>{{item}}连接情况</option>
                    {{# }else{ }}
                    <option value="{{item}}">{{item}}连接情况</option>
                    {{#  } }}
                    {{#  }); }}
                </select>
            </li>
        </ul>
    </div>
    <div id="connections" style="width: 100%;height:450px;"></div>
</div>

<script>
    ready(function() {
        layui.use(['zhanshop'], function () {
            var zhanshop = layui.zhanshop;
            var $ = layui.$;
            var dateStr = zhanshop.getParam("date");
            if(dateStr == "" || dateStr == false || dateStr == {}){
                // 获取当前日期
                var today = new Date();
                // 获取昨天的日期
                var yesterday = new Date(today);
                yesterday.setDate(today.getDate() - 1);

                // 格式化日期输出
                var yy = yesterday.getFullYear();
                var mm = (yesterday.getMonth() + 1).toString().padStart(2, '0')
                var dd = yesterday.getDate().toString().padStart(2, '0')
                dateStr = yy+''+mm+''+dd;
            }
            MAIN_DATE = dateStr;
            $('#dates').val(dateStr);
            zhanshop.view(API_ADDRESS + apiUrlecharts+"?type=connections&date="+dateStr, '#view', function (data) {

                var realTimeConnectionsOption = {
                    xAxis: {
                        data: data.connections.realtime
                    },
                    yAxis: {},
                    grid: {
                        top: 50,
                        left: 50,
                        right: 30,
                        height: 300
                    },
                    series: [
                        {
                            data: data.connections.realval,
                            type: 'line',
                            areaStyle: {
                                color: '#16baaa'
                            }
                        }
                    ]
                };

                var realTimeconnectionsChart = echarts.init(document.getElementById('realtime_connections'));
                realTimeconnectionsChart.setOption(realTimeConnectionsOption);

                var connectionsOption = {
                    xAxis: {
                        data: data.connections.time
                    },
                    yAxis: {},
                    grid: {
                        top: 50,
                        left: 50,
                        right: 30,
                        height: 300
                    },
                    series: [
                        {
                            data: data.connections.value,
                            type: 'line',
                            areaStyle: {
                                color: '#a233c6'
                            }
                        }
                    ]
                };
                var connectionsChart = echarts.init(document.getElementById('connections'));
                connectionsChart.setOption(connectionsOption);

            }, "GET");
        });

        window.onchangedate = function (obj){
            window.location = window.location.pathname+"?date="+obj.value
        }
    });

</script>
</body>
</html>